<template>
  <section>
    <van-sticky>
      <PageHeader title="VIP权益" />
    </van-sticky>

    <div class="text-center pt15 pb15">会员等级特权说明，可向左滑动查看更多</div>

    <div class="clearfix bg-color-white">
      <div class="bg-color-gray fl text-left" style="text-indent: 10px; width: 33%;">
        <dt class="strong bo_bf7 h40 color-red">等级</dt>
        <dd class="bo_bf7 h40">尊贵图标</dd>
        <dd class="bo_bf7 h40">上传相册</dd>
        <dd class="bo_bf7 h40">上传小视频</dd>
        <dd class="bo_bf7 h40">添加好友</dd>
        <dd class="bo_bf7 h40">公众号征婚</dd>
        <dd class="bo_bf7 h40">直播间推荐</dd>
        <dd class="bo_bf7 bsb pl20 relative">
          <div class="absolute ltb bg_f2 lh20 text-center pt20" style="left: 0rem; width: 20px;">
            <br>微<br>信<br>号
          </div>
          <ul class="bg-color-white">
            <li class="bo_bf7 h40">查看权限</li>
            <li class="bo_bf7 h40">每天查看数</li>
            <li class="bo_bf7 h40">查看费用</li>
            <li class="bo_bf7 h40">赠送查看次数</li>
          </ul>
        </dd>
        <dd class="bo_bf7 bsb pl20 relative">
          <div class="absolute ltb bg_f2 lh20 text-center pt20" style="left: 0rem; width: 20px;">
            <br>手<br>机<br>号
          </div>
          <ul class="bg-color-white">
            <li class="bo_bf7 h40">查看权限</li>
            <li class="bo_bf7 h40">每天查看数</li>
            <li class="bo_bf7 h40">查看费用</li>
            <li class="bo_bf7 h40">赠送查看次数</li>
          </ul>
        </dd>

        <dd class="bo_bf7 h40">接收礼物奖励金币</dd>
        <dd class="bo_bf7 h40">接收礼物奖励钱币</dd>
        <dd class="bo_bf7 h40">免费礼物福利</dd>
        <dd class="bo_bf7 h40">对会员爆灯</dd>
        <dd class="bo_bf7 h40">收到爆灯奖励</dd>

        <dd class="bo_bf7 h40">每天发信数量</dd>
        <dd class="bo_bf7 h40">发送语音私信</dd>
        <dd class="bo_bf7 h40">发信对方免费看</dd>
        <dd class="bo_bf7 h40">收信免费看</dd>
        <dd class="bo_bf7 h40">查看访客记录</dd>
        <dd class="bo_bf7 h40">查看会员登录时间</dd>
        <dd class="bo_bf7 h40">查看谁喜欢我</dd>
        <dd class="bo_bf7 h40">首页推荐</dd>
        <dd class="bo_bf7 h40">搜索靠前</dd>
      </div>

      <div class="lh40 fl bsb" style="white-space: nowrap; width: 67%; overflow: auto;">
        <dl class="inline-block text-center" style="margin-left: -0.1rem;" v-for="(item, index) in vipLevels" :key="index">
          <dt class="bo_bf7 h40 fb color-red plr20 text-center">{{item.name}}</dt>
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.vip_icon_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <span v-if="item.rights.items.album_photo_pics == -1">不限</span>
            <span v-else>{{item.rights.items.album_photo_pics}}张</span>
          </dd>
          <!--//9.10.11-->
          <dd class="bo_bf7 h40">
            <span v-if="item.rights.items.album_video_pics == -1">不限</span>
            <span v-else>{{item.rights.items.album_video_pics}}个</span>
          </dd>
          <dd class="bo_bf7 h40">
            <span v-if="item.rights.items.make_friends_amount == -1">不限</span>
            <span v-else>{{item.rights.items.make_friends_amount}}个</span>
          </dd>
          <dd class="bo_bf7 h40">
            <span v-if="item.rights.items.mp_publish_match_marriage_articles == -1">不限</span>
            <span v-else>{{item.rights.items.mp_publish_match_marriage_articles}}次</span>
          </dd>

          <dd class="bo_bf7 h40">
            <span v-if="item.rights.items.live_video_room_recommend_amount == -1">不限</span>
            <span v-else>{{item.rights.items.live_video_room_recommend_amount}}次</span>
          </dd>

          <!--解锁微信号-->
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.unlock_wxid_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <label>{{item.rights.items.unlock_wxid_amount_per_day == -1 ? '不限' : item.rights.items.unlock_wxid_amount_per_day}}</label>
          </dd>
          <dd class="bo_bf7 h40">
            <span>{{item.rights.items.unlock_wxid_price}}</span> 金币
          </dd>
          <dd class="bo_bf7 h40">
            <label>{{item.rights.items.unlock_wxid_present_amount}}</label>次
          </dd>

          <!--解锁手机号-->
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.unlock_phone_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <label>{{item.rights.items.unlock_phone_amount_per_day == -1 ? '不限' : item.rights.items.unlock_phone_amount_per_day}}</label>
          </dd>
          <dd class="bo_bf7 h40">
            <span>{{item.rights.items.unlock_phone_price}}</span> 金币
          </dd>
          <dd class="bo_bf7 h40">
            <label>{{item.rights.items.unlock_phone_present_amount}}</label>次
          </dd>

          <!--//0.04.17-->
          <dd class="bo_bf7 h40">
            <span>{{item.rights.items.receive_gift_reward_gold_coin_ratio}}</span>%
          </dd>
          <dd class="bo_bf7 h40">
            <span>{{item.rights.items.receive_gift_reward_cny_ratio}}</span>%
          </dd>
          <dd class="bo_bf7 h40">
            <span>{{item.rights.items.free_gift_pics}}</span>个
          </dd>
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.open_love_light_to_member_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <span>{{item.rights.items.receive_love_light_reward_ratio}}</span>%
          </dd>

          <dd class="bo_bf7 h40">
            <span>{{item.rights.items.send_msg_amount_per_day}}</span> 封
          </dd>

          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.send_voice_msg_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.send_msg_auto_unlock_for_receiver_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.receive_msg_auto_unlock_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.view_visitor_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.view_member_last_login_time_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.view_my_fans_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.home_recommend_enable"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
          <dd class="bo_bf7 h40">
            <i class="iconfont icon-dui color-green" v-if="item.rights.items.search_result_rank_front"></i>
            <i class="iconfont icon-cuowu color-red" v-else></i>
          </dd>
        </dl>
      </div>
    </div>
  </section>
</template>

<script>
import {memberVipLevelsUri, STATIC_BASE_URL} from "../../common/api";
import PageHeader from "../componets/PageHeader";

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        STATIC_BASE_URL: STATIC_BASE_URL,
        vipLevels: [],
      }
    },
    methods: {
      getVipLevels() {
        const that = this;
        const url = memberVipLevelsUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast.fail(msg);
          } else {
            let vipLevels = data.vip_levels;
            that.vipLevels = vipLevels;
          }
        }, response => {
          // error callback
        })
      },
    },
    mounted: function () {
      this.getVipLevels();
    }
  }
</script>

<style scoped>
  .h40 {
    height: 40px;
    line-height: 40px;
  }
  .lh40 {
    line-height: 40px;
  }
  .bo_bf7 {
    border-bottom: 1px solid #f7f7f7;
  }
  .bsb {
    box-sizing: border-box;
  }
  .fb {
    font-weight: bold;
  }
  .plr20 {
    padding-left: 20px;
    padding-right: 20px;
  }
</style>
